import { useNavigate } from "react-router-dom";
import Modal from "@mui/material/Modal";

import "./index.scss";

const PkWin = (props: any) => {
  const { onClose, selectedValue, open } = props;

  const handleClose = () => {
    onClose(selectedValue);
  };

  const navigate = useNavigate();
  /**
   * 跳转页面
   * @param url
   */
  function gotoPage(url: string) {
    navigate(url);
  }

  return (
    <Modal open={open}>
      <div className="win-modal-wrap">
        <div className="win-modal">
          <div className="inner-box">
            <div className="head-box">
              <img src="/images/win_txt.png" />
            </div>
            <div className="content-box">
              {/* 经验值 */}
              <div className="grade-value">
                <img className="img-icon" src="/images/grade_1.png" />
                <div className="grade-box">
                  <div className="level">
                    <span className="grade">青铜I</span>
                    <span className="exp">(230/300)</span>
                    <span className="exp-value">+60</span>
                  </div>
                  <div className="progress">
                    <div
                      className="progress-num"
                      style={{ width: "50%" }}
                    ></div>
                  </div>
                </div>
              </div>
              {/* PK双方信息 */}
              <div className="pk-player-box">
                <div className="game-player">
                  <div className="player-photo">
                    <img className="img-icon" src="/images/user_photo.png" />
                  </div>
                  <div className="name">艾琳娜</div>
                </div>
                <div className="game-player">
                  <div className="player-photo enemy-photo">
                    <img className="img-icon" src="/images/user_photo.png" />
                  </div>
                  <div className="name">艾琳娜</div>
                </div>
              </div>
              {/* 奖品 */}
              <div className="prize-box">
                <div className="hd">奖励</div>
                <div className="bd">
                    <div className="item">
                        <img className="img-icon" src="/images/prize_1.png" />
                        <div className="val">+2231</div>
                    </div>
                    <div className="item">
                        <img className="img-icon" src="/images/prize_2.png" />
                        <div className="val">+2231</div>
                    </div>
                    <div className="item">
                        <img className="img-icon" src="/images/prize_3.png" />
                        <div className="val">+2231</div>
                    </div>
                </div>
              </div>
              {/* 按钮 */}
              <div className="btns-box">
                <div className="btn goto-home" onClick={()=>{gotoPage("/")}}><span className="title">返回首页</span></div>
                <div className="btn" onClick={()=>{handleClose()}}><span className="title">继续</span><span className="remaining">体力：156</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};
export default PkWin;
